<template>
    <view class='audio-card'>
        <view class='audio'>
            <view class='play-icon'>
                <image
                    v-if='!isPlay'
                    mode='scaleToFill'
                    src='@/static/images/icon/audio-play.png'
                    style='width: 50rpx;height: 50rpx;'
                    @click='onPlayAudio' />
                <image
                    v-if='isPlay'
                    mode='scaleToFill'
                    src='@/static/images/icon/audio-pause.png'
                    style='width: 50rpx;height: 50rpx;'
                    @click='onPauseAudio' />
            </view>
            <view class='audio-main'>
                <slider
                    max='100'
                    block-size='12'
                    class='progress'
                    :block-color='sliderColor'
                    :activeColor='activeColor'
                    :backgroundColor='backgroundColor'
                    :value='progress'
                    @change='handleChange'
                    @changing='handleProgress' />
                <view class='time'>
                    <view>{{ dateFormart(currentTime) }}</view>
                    <view>{{ dateFormart(duration) }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { onLoad, onReady} from "@dcloudio/uni-app"
import { ref, onMounted, onUnmounted } from 'vue'

import { useAppStore } from '@/stores/app'
const appStore = useAppStore()

const emits = defineEmits(['update:modelValue'])
let props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    audioUrl: {
        type: String
    }
})
let innerAudioContext = ''
let isPlay = ref(false)

const sliderColor = ref('#009EFF');
const activeColor = ref('#009EFF');
const backgroundColor = ref('#EFEFEF');

const currentTime = ref(0);
const duration = ref(0);
const progress = ref(0);

// 处理时间格式(总时长装换时分秒)
const dateFormart = (value) => {
    value = Number(value).toFixed(0)
    let hour = Math.floor(value / 3600)
    let minute = Math.floor((value - hour * 3600) / 60)
    let second = value - hour * 3600 - minute * 60
    hour = hour < 10 ? `0${hour}` : hour
    minute = minute < 10 ? `0${minute}` : minute
    second = second < 10 ? `0${Math.floor(second)}` : Math.floor(second)
    return `${minute}:${second}`
}

const handleChange = (event) => {
    console.log(event);
    progress.value = event.detail.value
    currentTime.value = duration.value * (event.detail.value / 100)
    console.log(currentTime.value);
    onPlayAudio()
}

// 拖动进度条
const handleProgress = (event) => {
    innerAudioContext.pause()
}

function onPlayAudio(audioSrc) {
    console.log(`${appStore.config.domain}${props.audioUrl}`);
    if (dateFormart(currentTime.value) === dateFormart(duration.value)) {
        progress.value = 100
    }

    innerAudioContext.volume = 1
    innerAudioContext.stop()
    innerAudioContext.src = `${props.audioUrl}`
    isPlay.value = true
    console.log(Number(progress.value) === 100 ? 0 : (currentTime.value ? currentTime.value : 0));

    innerAudioContext.sessionCategory = "soloAmbient"
    innerAudioContext.seek(Number(progress.value) === 100 ? 0 : (currentTime.value ? currentTime.value : 0))
    innerAudioContext.startTime = Number(progress.value) === 100 ? 0 : (currentTime.value ? currentTime.value : 0)
    innerAudioContext.play()
    onCanplay();
}

const onCanplay = ()  => {
    innerAudioContext.onCanplay(() => {
        currentTime.value = innerAudioContext.currentTime
    })
    innerAudioContext.onTimeUpdate(() => {
        currentTime.value = innerAudioContext.currentTime
        progress.value = (innerAudioContext.currentTime / innerAudioContext.duration * 100).toFixed(2)
    })
    innerAudioContext.onEnded(() => {
        if (isPlay.value) {
            isPlay.value = false
        }
    })
}

function onPauseAudio() {
    innerAudioContext.pause()
    isPlay.value = false
}

onMounted(() => {
    console.log('onMounted')
    innerAudioContext = uni.createInnerAudioContext();
    // innerAudioContext.src = ''
    innerAudioContext.src = `${props.audioUrl}`
    innerAudioContext.onEnded(() => {
        isPlay.value = false
    })

    innerAudioContext.autoplay = true
    innerAudioContext.volume = 0
    innerAudioContext.startTime = 0
    innerAudioContext.play()

    innerAudioContext.onCanplay(() => {
        let intervalID = setInterval(() => {
            if (innerAudioContext.duration !== 0) {
                clearInterval(intervalID);
                duration.value = innerAudioContext.duration
                console.log(duration.value);


            }
        }, 100);
    })

    setTimeout(() => {
        innerAudioContext.pause()
    }, 100)
})

onUnmounted(() => {
    console.log('onUnmounted')
    innerAudioContext.pause()
    innerAudioContext.destroy();
})


</script>


<style lang='scss' scoped>
.audio-card {
    height: 100 rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    display: flex;
    flex-direction: column;
    padding: 20 rpx 24 rpx;

    .title {
        color: #333333;
        font-size: 26 rpx;
        font-weight: 500;
    }

    .audio {
        margin-top: 15 rpx;
        display: flex;

        .play-icon {
            width: 50 rpx;
            height: 50 rpx;
            padding-right: 20rpx;
        }

        .audio-main {
            height: 48 rpx;
            flex: 1;
            margin-left: 15 rpx;
            padding-top: 10rpx;
        }

        .progress {
            margin: 0;
        }

        .time {
            width: 100%;
            height: 50 rpx;
            font-size: 24 rpx;
            font-weight: 400;
            color: #666666;
            margin-top: -15rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }
}
</style>